<template>
	<view>
		<view class="cu-bar bg-white solid-bottom">
			<view class="action">
				<text class="cuIcon-title text-green "></text>@洋盘-qdds
			</view>
		</view>
		<view class="cu-list menu-avatar">
			<view class="cu-item" :class="modalName=='move-box-'+ index?'move-cur':''" v-for="(item,index) in list" :key="index"
			 @touchstart="ListTouchStart" @touchmove="ListTouchMove" @touchend="ListTouchEnd" :data-target="'move-box-' + index"
			 @click.stop="onChat(item)">
				<view class="cu-avatar round lg" :style="[{backgroundImage:'url('+item.avatar+')'}]"></view>
				<view class="content">
					<view class="text-grey">{{item.Nickname}}</view>
					<view class="text-gray text-sm flex">
						<text class="cuIcon-check text-green  margin-right-xs"></text>
						<text class="over-one-line" v-if="item.chatList"> {{item.chatList[item.chatList.length-1].text}}</text>
						<!-- <text class="cuIcon-infofill text-red  margin-right-xs"></text> 消息未送达 -->
					</view>
				</view>
				<view class="action flex">
					<view class="text-grey text-xs">{{$tool.formatDate(new Date(item.UpdateTime))}}</view>
					<!-- <view class="cu-tag round bg-grey sm">5</view> -->
				</view>
				<view class="move">
					<view class="bg-grey" @click.stop="onTop">置顶</view>
					<view class="bg-red" @click.stop="onDel">删除</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: [Object, Array,String],
				default: function() {
					return {}
				}
			}
		},
		name: "",
		data() {
			return {
				modalName: null,
				listTouchStart: 0,
				listTouchDirection: null
			}
		},
		created() {
			console.log(this.list)
		},
		methods: {
			// ListTouch触摸开始
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},

			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
			},

			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					// this.modalName = null
				}
				this.listTouchDirection = null
			},
			onChat(item) {
				// 切换状态下 不做操作
				if(this.modalName!=null) return 
				this.$pub.naviTo(`/pages/Chat/ChatWindow/ChatWindow?PersionId=${item.to}`)
				console.log('数据',item)
			},
			// 置顶按钮
			onTop() {
				this.modalName = null
			},
			// 删除按钮
			onDel() {
				this.modalName = null
			}
		}
	}
</script>

<style scoped lang="less">
	.cu-list {
		.cu-item {
			display: flex;
			align-items: flex-start;

			.cu-avatar {
				margin: 20rpx 0 0 0;
			}

			.content {
				padding: 20rpx 0 0 0;
				display: flex;
				flex-direction: column;
			}

			.action {
				padding: 20rpx 0 0 0;
				width: auto;
				display: flex;
				flex-direction: column;
				align-items: flex-end;


				.move {}
			}
		}
	}
</style>
